<!DOCTYPE html>
<html class="no-js" lang="zh_CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    <title>${system_admin_title}</title> #required_css
</head>

<body>
#loading
<div class="app $!layout">
    <!-- 头部菜单 -->
    #header
    <section class="layout">
        <!-- 菜单 -->
        #sidebar
        <!-- 内容主体 -->
        <section class="container">
            <section class="main-content">
                <!-- 主体操作栏 -->
                <header class="header navbar">
                    <!-- 左按钮区 -->
                    <div class="btn-group tool-button">
                        <a class="btn btn-primary navbar-btn" href="$!basePath/system/user" data-pjax><i
                                class="ti-angle-left"></i> 返回</a>
                    </div>
                </header>
                <div class="content-wrap">
                    <div class="wrapper">
                        <section class="panel pt20 pl20 pr20">
                            <form id="userAddForm" role="form" class="form-horizontal parsley-form"
                                  data-parsley-validate
                                  action="$!basePath/system/user/add/do" method="post">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group has-feedback">
                                            <label for="parentId" class="col-sm-2 control-label">所属机构</label>

                                            <div class="col-sm-8">
                                                <div class="input-group">
                                                    <input id="unitName" type="text" class="form-control"
                                                           placeholder="点击右边选择按钮选择所属部门--->" disabled/> <span
                                                        class="input-group-btn">
														<button type="button" class="btn btn-primary"
                                                                data-toggle="modal" data-target="#dialogSelectUnit">
                                                            <i class="ti-plus"></i> 选择
                                                        </button>
													</span>
                                                </div>
                                                <input type="hidden" name="unitId"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group" style="height:44px;">
                                            <label for="name" class="col-sm-2 control-label">角色(多选)</label>
                                            <div class="col-sm-8">
                                                <select disabled tabindex="2" name="roleIds"
                                                        data-placeholder="选择机构后，选择角色"
                                                        style="width:100%" multiple class="form-control chosen"
                                                        data-parsley-required="true"> #foreach($!role in $!roleList)
                                                    <option value="$!role.id">$!role.name #end
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <label for="name" class="col-sm-2 control-label">用户名</label>

                                            <div class="col-sm-8">
                                                <input type="text" tabindex="3" class="form-control" name="userName"
                                                       data-parsley-required="true" placeholder="登陆时使用的用户名"
                                                       maxlength="10">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <label for="name" class="col-sm-2 control-label">姓名</label>

                                            <div class="col-sm-8">
                                                <input type="text" tabindex="4" class="form-control" name="realName"
                                                       placeholder="真实姓名" maxlength="10">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <label for="name" class="col-sm-2 control-label">密码</label>

                                            <div class="col-sm-8">
                                                <input id="password" tabindex="5" type="password" class="form-control"
                                                       name="password" data-parsley-required="true" placeholder="密码"
                                                       maxlength="20">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <label for="name" class="col-sm-2 control-label">密码确认</label>

                                            <div class="col-sm-8">
                                                <input type="password" tabindex="6" class="form-control"
                                                       data-parsley-equalto="#password" data-parsley-required="true"
                                                       name="eqPassword" placeholder="请再输入一次密码" maxlength="20">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <label for="icon" class="col-sm-2 control-label">邮箱</label>

                                            <div class="col-sm-8">
                                                <input id="icon" type="text" tabindex="7" name="email"
                                                       data-parsley-type="email" class="form-control"
                                                       placeholder="电子邮箱地址 abc@nethsoft.com" maxlength="30">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <label for="icon" class="col-sm-2 control-label">联系方式</label>

                                            <div class="col-sm-8">
                                                <input type="text" tabindex="8" name="mobile" class="form-control"
                                                       placeholder="固定电话或手机号码" maxlength="20">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <label for="descript" class="col-sm-2 control-label">页面风格</label>
                                            <div class="col-sm-8">
                                                <select tabindex="9" name="pageStyle" data-placeholder="选择页面风格"
                                                        style="width:50%;" class="chosen">
                                                    #foreach($!obj in $!themeMap.entrySet())
                                                    <option value="$!obj.value">$!obj.key</option>
                                                    #end
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <label for="descript" class="col-sm-2 control-label">QQ</label>

                                            <div class="col-sm-8">
                                                <input type="text" name="qq" tabindex="10" class="form-control"
                                                       placeholder="QQ号码">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <label for="enabled" class="col-sm-2 control-label">是否启用</label>

                                            <div class="col-sm-8 switcha">
                                                <div class="mr15">
                                                    <input type="checkbox" name="enabled" class="js-switch-blue"
                                                           checked="checked">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                        <div class="hr-line-dashed"></div>
                                        <div class="form-group text-center">
                                            <div>
                                                <button class="btn btn-primary btn-form-submit btn-parsley"
                                                        data-loading-text="正在提交...">立即提交
                                                </button>
                                                <button type="reset" class="btn btn-default btn-outline">重置</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </section>
                    </div>
                </div>
                <a class="exit-offscreen"></a>
            </section>
            <!-- 选择机构 -->
            <div id="dialogSelectUnit" class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title">选择机构</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-xs-12">
                                    <div id="jsTreeUnit" class="demo"></div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                            <button type="button" class="btn btn-primary" onclick="selectUnit()">确认选择</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
</div>
#required_js

<script type="text/javascript">
    ns.requireJS(["/framework/plugins/switchery/switchery.js",
        "/framework/js/form/form.js",
        "/framework/js/view/toast.js",
        "/framework/js/view/tree.js",
        "/framework/js/form/select.js",
        "/framework/js/form/validator.js"]);
    function initTreeView() {
        $("#jsTreeUnit")
                .jstree(
                        {
                            plugins: ["wholerow"],
                            core: {
                                data: {
                                    url: function (node) {
                                        return node.id === "#" ? "$!basePath/system/unit/tree"
                                                : "$!basePath/system/unit/tree/"
                                        + node.id
                                    }
                                },
                                multiple: false
                            }
                        }).on("dblclick.jstree", function (node) {
            selectUnit();
        });
    }
    //选择机构
    function selectUnit() {
        var tree = $.jstree.reference("#jsTreeUnit");
        var node = tree.get_selected(true);
        $("#userAddForm #unitName").val(node[0].text);
        $("#userAddForm input[name='unitId']").val(node[0].id);

        //根据获取的机构，获取角色列表
        jQuery.post("$!basePath/system/user/unitrole/" + node[0].id, {},
                function (data) {
                    var roleSelect = $("#userAddForm select[name='roleIds']");
                    if (data.roles.length > 0) {
                        var html = "";
                        for (var i = 0; i < data.roles.length; i++) {
                            var role = data.roles[i];
                            html += "<option value='" + role.id + "'>"
                                    + role.name + "</option>";
                        }
                        roleSelect.html(html);
                    } else {
                        roleSelect.html("");
                        Toast.warning("当前机构无角色，请添加角色后再添加用户!");
                    }
                    roleSelect.removeAttr("disabled");
                    roleSelect.trigger("chosen:updated");
                    setTimeout(function () {
                        roleSelect.parent().find("input").focus();
                    }, 200);
                });
        $("#dialogSelectUnit").modal("hide");
    }
    $(function () {
        $('#userAddForm').ajaxForm(
                {
                    beforeSubmit: function (arr, $form, options) {
                        var roleIds = $(
                                "#userAddForm select[name='roleIds']")
                                .val();
                        if (!roleIds) {
                            Toast.error("至少需要选择一个角色！");
                            return false;
                        }
                        $form.find("button:submit").button("loading");
                    },
                    success: function (data, statusText, xhr, $form) {
                        if (data.success == true) {
                            Toast.success("用户增加成功！");
                            var unitName = $("#userAddForm #unitName")
                                    .val();
                            var roleIds = $(
                                    "#userAddForm select[name='roleIds']")
                                    .val();
                            //重置form
                            $form.resetForm();
                            //重置select
                            $("#userAddForm #unitName").val(unitName);
                            $("#userAddForm select[name='roleIds']").val(
                                    roleIds);
                            $("#userAddForm select[name='roleIds']")
                                    .trigger("chosen:updated");
                        } else {
                            Toast.error(data.error);
                        }
                        $form.find("button:submit").button("reset");
                    }
                });
        //初始化菜单树
        initTreeView();
    });
</script>

#loading_close
</body>
</html>
